<template>
  <!-- <div class="layout" v-if="!isShowSkeleton">
    <div class="items">
      <div class="item" v-for="item in 7" :key="item">{{ item }}</div>
    </div>
  </div> -->
  <div class="layout" v-if="!isShowSkeleton">
    <div class="item1" ref="chart1">1</div>
    <div class="item2">
      <div
        class="chart2"
        style="width: 100%; height: 240px; position: absolute; top: 50px"
        ref="chart2"
      ></div>
      <el-statistic title="周满意度参评人数" :value="source1" />
    </div>
    <div class="item3">
      <div
        class="chart3"
        style="width: 100%; height: 240px; position: absolute; top: 50px"
        ref="chart3"
      ></div>
      <el-statistic title="周满意度参评人数" :value="source2" />
    </div>
    <div class="item4">
      <div
        class="chart4"
        style="width: 100%; height: 240px; position: absolute; top: 50px"
        ref="chart4"
      ></div>
      <el-statistic title="周满意度参评人数" :value="source3" />
    </div>
    <div class="item5">
      <h3>今日机器人服务数</h3>
      <div class="box">
        <div ref="chart5"></div>
        <div ref="chart8"></div>
      </div>
    </div>
    <div class="item6" ref="chart6">
      <h3>今日客服活动</h3>
      <el-table :data="tableData" style="width: 100%; max-height: 90%; overflow-y: auto">
        <el-table-column prop="name" label="客服" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="currentReceptionCapacity" label="当前接待量" />
        <el-table-column prop="cumulativeReceptionVolume" label="累计接待量" />
        <el-table-column prop="degreeOfSatisfaction" label="相对满意度" />
        <el-table-column prop="receptionDuration" label="可接待中时长" />
      </el-table>
    </div>
    <div class="item7">
      <h3>今日机器人各时段服务数</h3>
      <div
        class="chart7"
        style="width: 80%; height: 340px; position: absolute; top: 50px;"
        ref="chart7"
      ></div>
    </div>
  </div>
  <template v-else>
    <SkeletonScreen :isShowSkeleton="isShowSkeleton" />
  </template>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import SkeletonScreen from './components/SkeletonScreen.vue'

const isShowSkeleton = ref(true)
const chart1 = ref(null)
const chart2 = ref(null)
const chart3 = ref(null)
const chart4 = ref(null)
const chart5 = ref(null)
const chart8 = ref(null)
const chart7 = ref(null)

const tableData = [
  {
    date: '2016-05-03',
    name: '周小艺',
    status: '工作',
    currentReceptionCapacity: '140',
    cumulativeReceptionVolume: '337',
    degreeOfSatisfaction: '92%',
    receptionDuration: '82min'
  },
  {
    date: '2016-05-02',
    name: '郑婷雅',
    status: '小休',
    currentReceptionCapacity: '124',
    cumulativeReceptionVolume: '432',
    degreeOfSatisfaction: '94%',
    receptionDuration: '74min'
  },
  {
    date: '2016-05-04',
    name: '冯启彬',
    status: '工作',
    currentReceptionCapacity: '127',
    cumulativeReceptionVolume: '970',
    degreeOfSatisfaction: '99%',
    receptionDuration: '84min'
  },
  {
    date: '2016-05-01',
    name: '赵玉贝',
    status: '工作',
    currentReceptionCapacity: '116',
    cumulativeReceptionVolume: '866',
    degreeOfSatisfaction: '98%',
    receptionDuration: '77min'
  }
]

const source1 = ref(0)
const source2 = ref(0)
const source3 = ref(0)

const startCountdown1 = () => {
  const targetValue = 3578
  const increment = 150
  const steps = Math.floor(targetValue / increment)
  const finalIncrement = targetValue % increment

  let count = 0
  const timer = setInterval(() => {
    if (count < steps) {
      source1.value += increment
    } else {
      source1.value += finalIncrement
      clearInterval(timer)
    }
    count++
  }, 30)
}

const startCountdown2 = () => {
  const targetValue = 4578
  const increment = 150
  const steps = Math.floor(targetValue / increment)
  const finalIncrement = targetValue % increment

  let count = 0
  const timer = setInterval(() => {
    if (count < steps) {
      source2.value += increment
    } else {
      source2.value += finalIncrement
      clearInterval(timer)
    }
    count++
  }, 30)
}

const startCountdown3 = () => {
  const targetValue = 5774
  const increment = 150
  const steps = Math.floor(targetValue / increment)
  const finalIncrement = targetValue % increment

  let count = 0
  const timer = setInterval(() => {
    if (count < steps) {
      source3.value += increment
    } else {
      source3.value += finalIncrement
      clearInterval(timer)
    }
    count++
  }, 30)
}

const initChart1 = () => {
  const myChart = echarts.init(chart1.value)

  const option = {
    width: 'auto',
    height: 'auto',
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['当前排队人数', '当前机器人接待量', '当前可接待客服', '当前人工接入数']
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '60%'],
        // 设置成相对的百分比
        center: ['60%', '50%'],
        data: [
          { value: 100, name: '当前排队人数' },
          { value: 65, name: '当前机器人接待量' },
          { value: 43, name: '当前可接待客服' },
          { value: 34, name: '当前人工接入数' }
        ],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 21,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        }
      }
    ]
  }
  myChart.setOption(option)
}

const initChart2 = () => {
  const myChart = echarts.init(chart2.value)

  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        data: [30, 53, 45, 74, 88, 74, 85],
        type: 'line',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8ec6ad'
            },
            {
              offset: 1,
              color: '#ffe599'
            }
          ])
        },
        color: ['#8ec6ad']
      }
    ]
  }
  myChart.setOption(option)
}

const initChart3 = () => {
  const myChart = echarts.init(chart3.value)

  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        data: [30, 53, 45, 74, 88, 74, 85],
        type: 'line',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8ec6ad'
            },
            {
              offset: 1,
              color: '#ffe599'
            }
          ])
        },
        color: ['#8ec6ad']
      }
    ]
  }
  myChart.setOption(option)
}

const initChart4 = () => {
  const myChart = echarts.init(chart4.value)

  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        data: [30, 53, 45, 74, 88, 74, 85],
        type: 'line',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8ec6ad'
            },
            {
              offset: 1,
              color: '#ffe599'
            }
          ])
        },
        color: ['#8ec6ad']
      }
    ]
  }
  myChart.setOption(option)
}

const initChart5 = () => {
  const myChart = echarts.init(chart5.value)

  const option = {
    width: 'auto',
    height: 'auto',
    legend: {
      orient: 'horizontal',
      align: 'auto',
      itemGap: 40,
      data: ['机器人接待量', '机器人解决量'],
      textStyle: {
        fontSize: 16
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '60%'],
        // 设置成相对的百分比
        center: ['50%', '50%'],
        data: [
          { value: 90, name: '机器人接待量' },
          { value: 75, name: '机器人解决量' }
        ],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center',
          formatter: function (val) {
            return val.data.name + '：' + val.data.value
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 21,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        }
      }
    ]
  }
  myChart.setOption(option)
}
const initChart8 = () => {
  const myChart = echarts.init(chart8.value)

  const option = {
    width: 'auto',
    height: 'auto',
    legend: {
      orient: 'horizontal',
      // left: 'left',
      align: 'auto',
      itemGap: 40,
      data: ['机器人接待量', '机器人解决量'],
      textStyle: {
        fontSize: 16,
        overflow: 'breakAll'
      }
      // formatter: function (name) {
      //   console.log(name)
      // }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '60%'],
        // 设置成相对的百分比
        center: ['50%', '50%'],
        data: [
          { name: '机器人接待量', value: 100 },
          { name: '机器人解决量', value: 65 }
        ],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center',
          formatter: function (val) {
            return val.data.name + '：' + val.data.value
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 21,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        }
      }
    ]
  }
  myChart.setOption(option)
}

const initChart7 = () => {
  const myChart = echarts.init(chart7.value)

  const option = {
    legend: {
      orient: 'vertical',
      left: 'left',
      width: '80%',
      itemGap: 25,
      itemHeight: 15, // 图例icon高度
      itemWidth: 15, // 图例icon宽度
      // data: [
      //   { name: '转人工数量', value: 200 },
      //   { name: '进入排队数', value: 120 },
      //   { name: '接入会话量', value: 40 }
      // ],
      formatter: function (name) {
        return name
      },
      icon: 'rect'
    },
    color: ['#C6E2FF', '#79BBFF', '#409EFF'],
    dataset: {
      source: [
        ['product', '转人工数量', '进入排队数', '接入会话量'],
        ['09:00', 248, 110, 124],
        ['10:00', 248, 110, 124],
        ['11:00', 248, 110, 124],
        ['12:00', 248, 110, 124],
        ['13:00', 248, 110, 124],
        ['14:00', 248, 110, 124]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
        },
        barWidth: '10%'
      },
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
        },
        barWidth: '10%'
      },
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
        },
        barWidth: '10%'
      }
    ]
  }
  myChart.setOption(option)
}

onMounted(async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      isShowSkeleton.value = false
      resolve()
    }, 3000)
  })

  await nextTick()
  // 初始化计时器
  startCountdown1()
  startCountdown2()
  startCountdown3()
  // 初始化图表
  initChart1()
  initChart2()
  initChart3()
  initChart4()
  initChart5()
  initChart8()
  initChart7()
})
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  .item1 {
    width: 310px;
    height: 260px;
    background-color: #fff;
  }

  .item2,
  .item3,
  .item4 {
    position: relative;
    width: 443px;
    height: 260px;
    background-color: #fff;
  }

  .el-statistic {
    position: absolute;
    top: 18px;
    left: 15px;
  }

  .item5,
  .item6 {
    margin-top: 25px;
    padding: 20px 23px;
    width: 49%;
    height: 332px;
    background-color: #fff;
    h3 {
      font-size: 20px;
      line-height: 28px;
    }
  }

  .item5 {
    display: flex;
    flex-direction: column;
    .box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      div {
        flex: 1;
        height: 100%;
      }

      div:first-child {
        border-right: 2px solid #f5f7fa;
      }
    }
  }

  .item7 {
    position: relative;
    padding: 20px 23px;
    margin-top: 25px;
    width: 1688px;
    height: 374px;
    background-color: #fff;
  }

  // .items {
  //   padding: 20px 20px;
  //   width: 100%;
  //   height: 100%;

  //   display: grid;
  //   grid-template-columns: repeat(4, 1fr);
  //   grid-gap: 20px;

  //   .item {
  //     width: 100%;
  //     background-color: #ccc;

  //     // 为特定的项添加样式
  //     &:nth-child(5),
  //     &:nth-child(6) {
  //       grid-column: span 2; // 跨越两列
  //     }

  //     &:nth-child(7) {
  //       grid-column: span 4; // 跨越三列
  //     }
  //   }
  // }
}

.el-table {
  &::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度为 5 像素。 */
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置滚动条轨道的背景颜色为浅灰色。 */
  }

  &::-webkit-scrollbar-thumb {
    background: #888; /* 设置滚动条滑块的背景颜色为深灰色。 */
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #bab9b9; /* 当鼠标悬停在滚动条滑块上时，背景颜色变为更深的灰色。 */
  }
}
</style>
